<script lang="ts" setup>
import { toggleDark } from "~/composables";
import { isCollapse } from "~/composables/value";
import { useUsersStore } from "../../store/user";
import ResetPassword from '../ResetPassword.vue';
import { ref } from 'vue';

const userStore = useUsersStore();
const resetPasswordRef = ref();
const modifyPassword = () => {
  resetPasswordRef.value.init({userName: userStore.userName});
}
const onLogout = async () => {
	// router.push('/');
  userStore.logout();
};

</script>
<template>
  <el-menu class="el-menu-demo" mode="horizontal">
    <el-menu-item index="0">习题练习系统</el-menu-item>
    <el-menu-item h="full" index="1" @click="toggleDark()">
      <button
        class="border-none w-full bg-transparent cursor-pointer"
        style="height: var(--ep-menu-item-height)"
      >
        <i inline-flex i="dark:ep-moon ep-sunny" />
      </button>
    </el-menu-item>
    <el-menu-item h="full" index="2">
      <el-radio-group v-model="isCollapse" size="small">
        <el-radio-button :value="false">菜单展开</el-radio-button>
        <el-radio-button :value="true">菜单折叠</el-radio-button>
      </el-radio-group>
    </el-menu-item>
    <el-sub-menu h="full" id="userInfo" index="3">
      <template #title>
        <el-icon><User /></el-icon>
        {{ userStore.userName }}
      </template>
      <!-- <el-menu-item h="full" index="3-1" v-on:click="">个人信息</el-menu-item> -->
      <el-menu-item h="full" index="3-2" v-on:click="modifyPassword">修改密码</el-menu-item>
      <el-menu-item h="full" index="3-3" v-on:click="onLogout">退出登录</el-menu-item>
    </el-sub-menu>
    <ResetPassword ref="resetPasswordRef" />
      <!-- <el-menu-item index="3">
        <el-icon><User /></el-icon>
      </el-menu-item> -->
  </el-menu>
</template>
<style>
/* .ep-menu--horizontal > .ep-menu-item:nth-child(4) {
  position: absolute;
  right: 0;
} */
/* 用户图标的 <el-sub-menu>标签样式，为了让其居右*/
#userInfo > .ep-sub-menu__title {
  position: absolute;
  right: 0;
}
.el-menu-demo {
  position: relative;
}
/* 右上角个人信息、退出登录的宽度，默认是200px太长了 */
.ep-menu--popup {
  min-width: 100px;
}
/* .ep-menu--horizontal > .ep-menu-item:nth-child(5) {
  width: 100px;
  position: absolute;
  right: 0;
} */

</style>
